<template>
	<view class="page  box-sizing ">
<!-- <up-skeleton
	    rows="9999"
		rowsHeight="99999"
	    title
		loading
	></up-skeleton> -->
		<!-- <up-navbar title="" bgColor = "#fff" placeholder></up-navbar> -->
		<view class="content" v-if="topimage!=''">
			<view class="login_header flex" :style="{
		        backgroundImage: `url('${topimage}')`,
		        backgroundSize: '100% 100%',
			
		      }">
				<!-- 		<view class="login_tab flex items-center marginTop-40">
					<view class="login_tab_tit marginRight-24">
						掌握情况
					</view>
					<view class="login_tab_box flex items-center u-flex-around">
						<view class="login_tab_btn " v-for="(t,i) in lists.masters" :key="i"
							:class="current==i?'hover':''" @click="masterClick(t,i)">
							{{t}}
						</view>
					</view>
				</view> -->
			</view>
			<view class="padding-24">
				<view class="login_title">
					小学/初中
				</view>
				<view class="lists marginTop-20 flex flex-wrap items-center flex-start">
					<view class="list text-center" v-for="(item,index) in lists.grade_ids[1]" :key="index"
						@click="gradeClick(item,index)" :class="current2 ==index?'hover':''">
						{{item}}
					</view>
				</view>
				<view class="login_title">
					高中
				</view>
				<view class="lists marginTop-20 flex flex-wrap items-center flex-start">
					<view class="list text-center" v-for="(item,index) in lists.grade_ids[2]" :key="index"
						@click="gradeClick(item,index)" :class="current2 ==index?'hover':''">
						{{item}}
					</view>
				</view>
				<view class="login_title">
					大学
				</view>
				<view class="lists marginTop-20 flex flex-wrap items-center flex-start">
					<view class="list text-center" v-for="(item,index) in lists.grade_ids[3]" :key="index"
						@click="gradeClick(item,index)" :class="current2 ==index?'hover':''">
						{{item}}
					</view>
				</view>
				<!-- <view class="login_title">
					其他
				</view>
				<view class="lists marginTop-20 flex flex-wrap items-center flex-start">
					<view class="list text-center" v-for="(item,index) in lists.word_identity" :key="index"
						@click="gradeClick2(item,index)" :class="current3 ==index?'hover':''">
						{{item}}

					</view>
				</view> -->
			</view>
			<view class="btn" @click="openShow">
				开启学法之路
			</view>
			<image :src="bottomimage" mode="" class="login_bot_img"></image>
			<!-- 		<view class="flex width-full head">
				<view class="textBox headTitle box-sizing fontSize-28 marginRight-20 height-250 flex column flex-end"
					style="flex: 1;">
					欢迎使用百霸智育,为了提供更符合您的学习方案,请先定位您当前英语学习位置
				</view>
				<view class="imageBox">
					<image class="imageBj" :src="imageVal"></image>
				</view>
			</view>
			<view class="selectBox width-full flex column">
				<view class="fontSize-28 color-7b7b7b">
					年级
				</view>
				<view class="marginTop-20 select flex width-full flex-wrap">
					<view class="item fontSize-28" :class="form.grade_id == i?'bjBlue':'bjDefault'"
						@click="gradeClick(t,i)" v-for="(t,i) in lists.grade_ids" :key="i">
						{{t}}
					</view>
				</view>
			</view>
			<view class="selectBox width-full flex column">
				<view class="fontSize-28 color-7b7b7b">
					掌握情况
				</view>
				<view class="marginTop-20 select flex width-full flex-wrap">
					<view class="item fontSize-28" :class="form.master == i?'bjBlue':'bjDefault'"
						@click="masterClick(t,i)" v-for="(t,i) in lists.masters" :key="i">
						{{t}}
					</view>
				</view>
			</view> -->
		</view>
		<up-popup :show="show" mode='center' :round="44">
			<view class="popup_bg">
				<view class="popup_title">
					掌握情况
				</view>
				<view class="popup_pro">
					为了提供更符合您情况的学习方案
					烦请您选择以下选项，非常感谢！
				</view>
				<view class="flex items-center u-flex-around">
					<view class="bg_list flex items-center " v-for="(t,i) in zhangwo" :key="i"
						:class="current==t.masters?'currentHover':''" @click="masterClick(t,i)">
						<image :src="t.value" mode=""></image>
						<view class="bg_lable">
							{{t.lable}}
						</view>
					</view>
				</view>
				<view class="popup_btn" @click="toPage">
					确定
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue'

	import {
		onLoad,
	} from '@dcloudio/uni-app'
	// const imageVal = ref(image)
	const getConfigSetApi = inject('getConfigSet')
	const show = ref(false)
	const loading=ref(true)
	const form = ref({
		grade_id: null,
		master: 1,
		masterName: '',
		gradeName: '',
		word_identity: '',
		word_identityName: '',
	})
	const lists = ref({
		masters: [],
		grade_ids: [],
		word_identity: [],
	})
	const topimage = ref('')
	const bottomimage = ref('')
	const current = ref(1)
	const current2 = ref('')
	const current3 = ref('')
	const loginParam = uni.getStorageSync('loginParam');
	const zhangwo = ref([])
	onLoad(() => {
		wx.login({
			success(res) {
				console.log(res, 134)
				getConfigSetApi({
					code: res.code
				}).then(es => {
					console.log(es)
					// loading.value=false
					if (es.user && es.user.user_id) {
						uni.setStorageSync('userInfo', es.user)
						uni.setStorageSync('token', es.token)
						uni.redirectTo({
							url: '/pages/index/index'
						})
					}
					lists.value['grade_ids'] = es['grade_ids']
					lists.value['masters'] = es['masters']
					lists.value['word_identity'] = es['word_identity']
					bottomimage.value = es['bottomimage']
					zhangwo.value = es.zhangwo
					topimage.value = es['topimage']
					console.log(es.user, 777777777777)
					console.log(es.user.length, 'eewgw')
					loading.value=false

				})
			}
		})


	});
	const loginWordCodeApi = inject('loginWordCode');
	const loginWordCode = () => {
		wx.login({
			success(res) {
				if (res.code) {
					//发起网络请求
					let param = {
						code: res.code,
						grade_id: form.value.grade_id,
						master: form.value.master,
						word_identity: form.value.word_identity
					}
					loginWordCodeApi(param).then(es => {
						console.log(es, '66666')
						uni.setStorageSync('loginParam', param)
						uni.setStorageSync('userInfo', es.data)
						uni.setStorageSync('token', es.token)
						// return
						// provide('loginParam',loginParam);
						// provide('userInfo',userInfo);
						// provide('token',token);
						// uni.reLaunch({
						// 	url: '/pages/index/index'
						// })
						uni.reLaunch({
							url: '/pages/login/book?grade_id=' + form.value.grade_id +
								'&book_id=' + es.data.memberset.book_id
						})
					})
				}
			}
		})
	};
	const toPage = () => {
		console.log(form.value)
		if (form.value.grade_id && form.value.master) {
			loginWordCode()

		}
	}
	const gradeClick = (t, i) => {
		form.value.grade_id = i;
		form.value.gradeName = t;
		current2.value = i
		// toPage();
	}
	const openShow = (t, i) => {
		if (form.value.grade_id) {
			show.value = true
		} else {
			uni.showToast({
				title: '请选择年级',
				icon: 'none'
			})
		}
	}

	const gradeClick2 = (t, i) => {
		form.value.word_identity = i;
		form.value.word_identityName = t;
		current3.value = i
		// toPage();
	}

	const masterClick = (t, i) => {
		console.log('怎么不生效', t, i)
		form.value.master = t.masters;
		current.value = t.masters
		console.log(current.value)
		form.value.masterName = t.label;
		// toPage();
	}
</script>

<style lang="scss" scoped>
	// .textBox {
	// 	line-height: 45rpx;
	// }

	// .head {
	// 	margin-top: -50rpx;
	// }

	// .headTitle {
	// 	padding-bottom: 50rpx;
	// }

	// .imageBox {
	// 	height: 250rpx;
	// 	width: 200rpx;
	// 	overflow: hidden;
	// }

	// .imageBj {
	// 	height: 250rpx;
	// 	width: 200rpx;
	// 	scale: 1.15;
	// }

	// .selectBox {}

	// .select {}

	// .item {
	// 	width: calc(33.33% - 11rpx);
	// 	margin-bottom: 20rpx;
	// 	margin-right: 15rpx;
	// 	border-radius: 10rpx;
	// 	box-sizing: border-box;
	// 	height: 80rpx;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// 	border: 1rpx solid #ededed;

	// 	&:nth-child(3n) {
	// 		margin-right: 0;
	// 	}
	// }

	// .bjBlue {
	// 	background-color: #d5f0ff;
	// }

	// .bjDefault {
	// 	background-color: #fff;
	// }
	.login_header {
		width: 750rpx;
		height: 300rpx;
		// background: linear-gradient( 179deg, #40D577 0%, rgba(64,213,119,0.5) 68%, rgba(64,213,119,0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.login_header_tit {
			height: 56rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #333333;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.smile_img {
			width: 40rpx;
			height: 40rpx;
		}

		.right_img {
			width: 272rpx;
			height: 316rpx;
		}

		.login_header_cont {
			height: 72rpx;
			width: 420rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.login_tab {
			position: absolute;
			top: 270rpx;
			left: 48rpx;

			.login_tab_tit {
				height: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.login_tab_box {
				width: 264rpx;
				height: 56rpx;
				border-radius: 52rpx;
				border: 1rpx solid #40D577;

				.login_tab_btn {
					width: 88rpx;
					height: 56rpx;
					text-align: center;
					line-height: 56rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;

					border-radius: 52rpx;
				}

				.hover {
					background: #40D577;
					color: #fff;
					border-radius: 52rpx;
				}
			}
		}
	}

	.btn {
		width: 702rpx;
		height: 104rpx;
		background: #40D577;
		border-radius: 92rpx 92rpx 92rpx 92rpx;
		text-align: center;
		line-height: 104rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 80rpx auto 0;
	}

	.login_bot_img {
		width: 522rpx;
		height: 56rpx;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.login_title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 38rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.lists {
		.list {
			width: 164rpx;
			height: 72rpx;
			background: #EBEBEB;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			line-height: 72rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 20rpx;
			margin-right: 10rpx;
		}

		.hover {
			width: 164rpx;
			height: 72rpx;
			background: #40D577;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			color: #fff;
		}
	}

	.popup_bg {
		width: 574rpx;
		height: 550rpx;
		background-color: #FFFFFF;
		border-radius: 44rpx;

		.popup_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			text-align: center;
			padding: 30rpx 0 40rpx 0;
		}

		.popup_pro {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #666666;
			text-align: center;
			font-style: normal;
			text-transform: none;
			width: 420rpx;
			margin: 0 auto 30rpx;
		}

		.popup_btn {
			width: 526rpx;
			height: 92rpx;
			background: #40D577;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			font-style: normal;
			text-transform: none;
			margin: 40rpx auto 0;
		}

		.bg_list {

			width: 164rpx;
			height: 164rpx;
			background: #F5F5F5;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			image {
				display: block;
				margin-left: 24rpx;
				width: 70rpx;
				height: 100rpx;
			}

			.bg_lable {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-left: 6rpx;
			}
		}

		.currentHover {
			border: 2rpx solid #51D580;
		}
	}
</style>